<template>
  <div class="health-records-detail">
    <!-- 健康指数环形图 -->
    <div class="health-index-circle">
      <div class="circle-container">
        <div class="progress-ring">
          <svg class="progress-svg" width="120" height="120">
            <!-- 背景圆环 -->
            <circle
              cx="60"
              cy="60"
              r="50"
              fill="none"
              stroke="#fff"
              stroke-width="6"
            />
            <!-- 进度圆环 -->
            <circle
              cx="60"
              cy="60"
              r="50"
              fill="none"
              stroke="url(#gradient)"
              stroke-width="12"
              stroke-linecap="round"
              :stroke-dasharray="circumference"
              :stroke-dashoffset="strokeDashoffset"
              transform="rotate(-90 60 60)"
            />
            <!-- 结束点小圆点 -->
            <circle
              :cx="endPointX"
              :cy="endPointY"
              r="2"
              fill="#fff"
              stroke="#fff"
              stroke-width="1"
            />
            <!-- 定义渐变 -->
            <defs>
              <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop
                  offset="0%"
                  style="stop-color: #b9e3ff; stop-opacity: 1"
                />
                <stop
                  offset="50%"
                  style="stop-color: #b9e3ff; stop-opacity: 1"
                />
                <stop
                  offset="100%"
                  style="stop-color: #515fd9; stop-opacity: 1"
                />
              </linearGradient>
            </defs>
          </svg>

          <!-- 中心内容 -->
          <div class="circle-content">
            <div class="score-number">{{ healthScore }}</div>
            <div class="line" />
            <div class="score-label">PHI</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";

// 定义 props
interface Props {
  healthScore?: number;
}

const props = withDefaults(defineProps<Props>(), {
  healthScore: 0 // 默认值
});

// 计算圆环相关数值
const radius = 50;
const circumference = computed(() => 2 * Math.PI * radius);
const strokeDashoffset = computed(() => {
  const progress = props.healthScore / 100;
  return circumference.value * (1 - progress);
});

// 计算结束点位置
const endPointX = computed(() => {
  const progress = props.healthScore / 100;
  const angle = progress * 2 * Math.PI - Math.PI / 2; // 从顶部开始，顺时针
  return 60 + radius * Math.cos(angle);
});

const endPointY = computed(() => {
  const progress = props.healthScore / 100;
  const angle = progress * 2 * Math.PI - Math.PI / 2; // 从顶部开始，顺时针
  return 60 + radius * Math.sin(angle);
});
</script>

<style scoped>
/* 健康指数环形图样式 */
.health-index-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.circle-container {
  position: relative;
  width: 120px;
  height: 120px;
}

.progress-ring {
  position: relative;
  width: 100%;
  height: 100%;
}

.progress-svg {
  transform: rotate(0deg);
  width: 100%;
  height: 100%;
}

.progress-svg circle {
  transition: stroke-dashoffset 0.8s ease-in-out;
}

.circle-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.score-number {
  font-size: 28px;
  font-weight: 700;
  color: #4285f4;
  line-height: 1;
  margin-bottom: 2px;
}
.line {
  width: 38px;
  height: 1px;
  background: #e1e1e1;
  box-shadow:
    0px 1px 16px 0px rgba(0, 212, 229, 0.24),
    0px 1px 6px 0px rgba(0, 27, 103, 0.08);
  border-radius: 1px;
}

.score-label {
  font-size: 12px;
  color: #999;
  font-weight: 500;
  letter-spacing: 1px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .circle-container {
    width: 100px;
    height: 100px;
  }

  .progress-svg {
    width: 100px;
    height: 100px;
  }

  .circle-content {
    width: 70px;
    height: 70px;
  }

  .score-number {
    font-size: 24px;
  }
}
</style>
